<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="formInline"
      style="flex-wrap: nowrap"
      class="demo-form-inline sp_between"
    >
      <div>
        <el-form-item :label="$t('orderForm.orderTime ')">
          <el-date-picker
            v-model="formInline.orderTime"
            type="daterange"
            range-separator="~"
            start-placeholder="start date"
            end-placeholder="date closed"
            format="MM-dd-yyyy"
          />
        </el-form-item>
        <el-form-item :label="$t('orderForm.orderNumber')">
          <el-input v-model="formInline.orderNumber" />
        </el-form-item>
        <el-form-item :label="$t('orderForm.productName')">
          <el-input v-model="formInline.productName" />
        </el-form-item>
        <el-form-item :label="$t('orderForm.orderStatus')">
          <el-select v-model="formInline.orderStatus">
            <template v-for="(item, index) in orderStatus">
              <template v-if="activeName == 'type0'">
                <el-option
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </template>
              <template v-if="activeName != 'type0'">
                <el-option
                  v-if="item.label != 'Reviewing'"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </template>
            </template>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button
          plain
          type="primary"
          icon="el-icon-search"
          @click="onSubmit"
          >{{ $t("orderForm.search") }}</el-button
        >
      </el-form-item>
    </el-form>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="Card" name="type0" />
        <el-tab-pane label="General product" name="type1" />
      </el-tabs>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        fixed
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          width="180"
          prop="orderTime"
          :label="$t('orderTable.orderTime')"
        >
          <template slot-scope="scope">{{
            timeWord(scope.row.orderTime)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          :label="$t('orderTable.orderNumber')"
        />
        <el-table-column
          prop="productName"
          :label="$t('orderTable.productName')"
        />
        <el-table-column
          prop="grandTotal"
          :label="$t('orderTable.grandTotal')"
        />
        <el-table-column
          prop="orderStatus"
          :label="$t('orderTable.orderStatus')"
        >
          <template slot-scope="scope">{{
            scope.row.orderStatus.label
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('orderTable.operating')">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="seeDetail(scope.row.id)"
              >{{ $t("orderTable.details") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block cz_center">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="formInline.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <span class="pageText"> {{ $t("pagination.page") }} </span>
      </div>
    </div>
  </div>
</template>
 
<script>
import { getOrderList } from "@/api/order";
export default {
  name: "List",
  data() {
    return {
      value1: "",
      currentPage: 1,
      total: 0,
      formInline: {
        page: 1,
        limit: 10,
        orderStatus: "",
      },
      tableData: [],
      orderStatus: this.storage.get("orderStatus"),
      activeName: "type0",
    };
  },
  created() {
    this.init();
  },
  methods: {
    handleClick(tab, event) {
      this.formInline.orderStatus = "";
      this.formInline.orderType = tab.name;
      this.formInline.page = 1;
      this.init();
    },
    seeDetail(id) {
      this.$router.push({
        path: "details?id=" + id,
      });
    },
    handleSizeChange(val) {
      this.formInline.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.init();
    },
    init() {
      getOrderList(this.formInline).then((response) => {
        console.log(response);
        this.tableData = response.data;
        this.total = response.count;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onSubmit() {
      console.log(this.formInline);
      this.formInline.page = 1;
      this.formInline.limit = 10;
      if (this.formInline.orderTime) {
        this.formInline.orderTime0 = this.formInline.orderTime[0];
        this.formInline.orderTime1 = this.formInline.orderTime[1];
      }
      this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
.oldPrice span {
  color: #c0c4cc !important;
  text-decoration: line-through !important;
}
</style>
